<template>
  <div class="search-content">
    <van-nav-bar
      title="搜影院"
      fixed
      placeholder 
    />
    <!-- 头部：搜索 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        clearable
        clear-trigger 
        maxlength=12
        placeholder="搜影院"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-empty description="描述文字" />
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  name:'Search',
  data() {
    return {
      value:''
    }
  },
  methods:{
    // 在点击键盘上的搜索/回车按钮后触发
    onSearch(val) {
      Toast(val);
    },
    // 点击搜索框右侧取消按钮时触发
    onCancel() {
      this.$router.push('/cinema')
      Toast('取消搜索返回影院列表')
    }
  }
}
</script>

<style>

</style>